<template>
  <div class="echarts">
    <div class="interface" id="interfaces"></div>
    <transition name="fade">
      <div v-if="showNodeDesc" id="flexNode" class="flex-node">
        <i class="el-icon-circle-close"></i>
      </div>
    </transition>
  </div>
</template>
<script>
  export default {
    name:'echarts',
    props: {
      data: {
        type: Array,
        default: () => []
      },
      link: {
        type: Array,
        default: () => []
      }
    },
    data(){
      return  {
        showNodeDesc: false,
      }
    },
    created(){
      this.onloadInterface()
    },
    methods:{
      onloadInterface(){
        // console.log(this.data);
        // console.log(this.link);
        this.$nextTick(() => {
          let myechart = this.echarts.init(document.getElementById('interfaces'));
          let _zr = myechart.getZr();
          //点击节点
          myechart.on('click', (params) => {
            this.$emit("clickNode", params.data);
          })

          //鼠标悬停节点
          myechart.on('mouseover', (params) => {
            let left = params.event.event.layerX;
            let top = params.event.event.layerY;
            this.showNodeDesc = true;
            setTimeout(() => {
              $("#flexNode").css({ left: left + 'px', top: top + 'px' });
            }, 200);
          })

          //鼠标离开节点
          myechart.on('mouseout', (params) => {
            this.showNodeDesc = false;
          })

          let option = {
            backgroundColor: new echarts.graphic.RadialGradient(0.1, 0.1, 0.8, [{
              offset: 0,
              color: '#eee'
            }, {
              offset: 1,
              color: '#eee'
            }]),
            color: ['#54d1ff'],
            title: {
              text: "",
              top: "top",
              left: "left"
            },
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            },
            legend: [{
              formatter: function (name) {
                return this.echarts.format.truncateText(name, 200, '12px', '…');
              },
              tooltip: {
                show: true
              },
              selectedMode: 'false',
              bottom: 20,
            }],
            animationDuration: 3000,
            animationEasingUpdate: 'quinticInOut',
            series: [{
              type: 'graph',
              layout: 'none',
              legendHoverLink: true,
              //箭头
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [2, 15],
              edgeLabel: {
                show: false,
                normal: {
                  show: true,
                  position: 'middle',
                  textStyle: {
                    fontSize: 12
                  },
                  formatter: "{c}"
                }
              },
              itemStyle: {
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
              },
              //自适应布局
              force: {
                edgeLength: 100,
                repulsion: 500,
                gravity: 0.1
              },
              draggable: true,
              symbolSize: (value, params) => {
                //根据数据params中的data来判定数据大小
                switch (params.data.category) {
                  case 0:return 100;break;
                  case 1:return 80;break;
                  case 2:return 60;break;
                  case 3:return 40;break;
                  default:return 50;
                };
              },
              data: this.data,
              links: this.link,
              focusNodeAdjacency: true,
              roam: true,
              //圆形上面的文字
              label: {
                normal: {
                  position: "inside",
                  show: true,
                  textStyle: {
                    fontSize: 12
                  },
                  formatter:function(params){
                    return params.data.name;
                  }
                }
              },
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 1,
                  curveness: 0,
                  color: '#ccc',
                }
              }
            }]
          };
          myechart.setOption(option);
        })
      },
    }
  }
</script>
<style scoped lang="less">
  .interface{width:100%;height: 350px;overflow: hidden;}
  .flex-node{
    position: absolute;
    z-index: 1000;
    text-align: center;
    color: #fff;
    line-height: 80px;
    overflow:hidden;
    i{
      font-size: 30px;
      color: #0aa8e9;
    }
  }
</style>
